<template>
  <section class="business-section">
    <div class="service-info">
      <!-- 加载状态提示 -->
      <div v-if="isLoading" class="loading">加载中...</div>

      <!-- 服务详情内容（数据加载完成后展示） -->
      <div v-else if="responseData">
        <h1 class="service-title">{{ responseData.serviceMainName }}</h1>
        <p class="service-subtitle">副标题：{{ responseData.serviceSubName }}</p>
        <div class="service-scope">
          <h3>适用范围</h3>
          <p>{{ responseData.serviceScope }}</p>
        </div>
        <div class="service-price">
          <h3>价格</h3>
          <p>{{ responseData.serviceMoney }}</p>
        </div>
        <div class="service-times">
          <h3>已服务{{ responseData.serviceCount }}个用户</h3>

        </div>
        <button class="btn-book" @click="$router.push({
          path: '/payform',
          query: {
            id: this.$route.params.id,
            serviceData: JSON.stringify({
            serviceId: this.$route.params.id,
            categoryId: responseData.categoryId,
            serviceMainName: responseData.serviceMainName,
            serviceSubName: responseData.serviceSubName,
            serviceHeadImg: responseData.serviceHeadImg,
            serviceScope: responseData.serviceScope,
            serviceBodyImg: responseData.serviceBodyImg,
            serviceCount: responseData.serviceCount,
            orderStartMoney: 20,
            orderEndMoney:responseData.serviceMoney-20,
            serviceStatus: responseData.serviceStatus
    })
  }
})">
          立即预订
        </button>
      </div>
    </div>
  </section>

</template>


<style scoped>.business-section {
  padding: 60px 20px;
  background-color: #FFF2E2;
  text-align: center;
}
.btn-book {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 15px;
  max-width: 150px;    /* 最大宽度限制 */
  white-space: nowrap;  /* 防止文字换行 */
  overflow: hidden;     /* 超出隐藏（可选） */
  text-overflow: ellipsis; /* 超出显示省略号（可选） */
  background-color: #1abc9c;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-book:hover {
  background-color: #16a085;
  transform: scale(1.03);
}
p{
  text-align: left;
}
h3{
  text-align: left;
}
.service-title{
  text-align: center;


}
.cards {

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  margin-top: 50px;
}

.card {
  background-color:#C7EDCC;

  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
}
</style>
<style scoped>.card-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}
img{
  width: 200px;
  height: 150px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.card-actions button {
  flex: 1;
  padding: 6px 8px;
  border: none;
  background-color: #1abc9c;
  color: white;
  border-radius: 4px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.card-actions button:hover {
  background-color: #16a085;
}
.card-actions a {
  text-decoration: none;
  color: #1abc9c;
  margin: 0 5px;
  font-size: 0.85rem;
  transition: color 0.3s ease;
}

.card-actions a:hover {
  color: #16a085;
}
</style>
<script>
import {BASE_URL} from "@/util/Config.js";
export default {
  data() {
    return {
      responseData: null,
      isLoading: true
    };
  },
  methods: {
    async sendData() {
      this.isLoading = true;
      try {
        const id = this.$route.params.id;
        const response = await fetch(`${BASE_URL}/servicesdetail`, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            serviceId: id
          })
        });

        if (!response.ok) throw new Error('Network response was not ok');

        const { data } = await response.json();
        this.responseData = data;
      } catch (error) {
        console.error('There was an error!', error);
      } finally {
        this.isLoading = false;
      }
    },

    async bookService() {
      try {
        const id = this.$route.params.id;

        const response = await fetch(BASE_URL+'/api/alipay/pay', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            serviceId: id,
            userId: 123,
            serviceMoney: this.responseData.serviceMoney,     // ✅ 添加
            serviceMainName: this.responseData.serviceMainName
          })
        });

        if (!response.ok) {
          throw new Error('支付请求失败');
        }

        // 支付宝返回的是 HTML 页面，不是 JSON
        const htmlContent = await response.text();

        // 创建一个临时的 div 来装载 HTML 表单
        const div = document.createElement('div');
        div.innerHTML = htmlContent;

        // 查找表单并提交（模拟跳转）
        const form = div.querySelector('form');
        if (form) {
          document.body.appendChild(form);
          form.submit(); // 自动跳转到支付宝支付页面
        } else {
          throw new Error('未找到支付表单');
        }

      } catch (error) {
        console.error('支付出错:', error);
        alert('支付失败，请重试');
      }
    }
  },
  mounted() {
    this.sendData();
  }
}
</script>